import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, { getModelValue, initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import type { FilterDto } from '@/render/FilterRender'
import type { CompanyDetailDto, CompanyInfoDto, PayWageInfoDto } from '@/api/company/types'
import { getChannelList, getCompanyDetail, updateSaasCompany } from '@/api/company'
import { Button, message } from 'ant-design-vue'
import CustomTitle from '@/components/custom-title/Index'
import { getReceiptList } from '@/api/customer'
import { ProductTypeEnum } from '@/const/enum'
import { goBack } from '@/utils/util'

@Component({
    expose: ['getData']
})
export class EditBasicInfo extends Render {
    // @Prop() basicData!: PayWageInfoDto
    // @Prop() companyBasicInfo!: CompanyInfoDto

    showRecharge = false

    basicData = {} as CompanyDetailDto

    @Emit('refresh')
    handleRefresh() {}

    // @Watch('basicData')
    // async handleWatch() {

    // }

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '基本信息',
            width: '800px',
            theme: 'light',
            show: false,
            gutter: 20,
            items: {
                companyAbbreviation: {
                    name: '公司简称',
                    element: 'input',
                    span: 12
                },
                receiptId: {
                    name: '收款账户',
                    element: 'select',
                    span: 12,
                    params: {
                        defaultAttrs: {
                            label: 'bankName',
                            value: 'id'
                        }
                    },
                    callback: {
                        async method() {
                            return await getChannelList()
                        }
                    }
                },
                creditCode: {
                    name: '营业执照编码',
                    element: 'input',
                    span: 12
                },
                merchantBankCard: {
                    name: '客户充值账户',
                    element: 'input',
                    span: 12
                },
                businessLicenseAddress: {
                    name: '营业执照地址',
                    element: 'input',
                    span: 12
                },
                area: {
                    name: '所在区域',
                    element: 'input',
                    span: 12
                },
                legalPerson: {
                    name: '公司法人',
                    element: 'input',
                    span: 12
                },
                subMchid: {
                    name: '商户号',
                    element: 'input',
                    span: 12
                },
                creditCodePicture: {
                    name: '上传营业执照',
                    element: 'upload',
                    params: {
                        autoUpload: false,
                        accept: '.png,.jpg,.jpeg',
                        maxSize: 5,
                        hint: '文件大小不超过5M'
                    },
                    span: 12
                }
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)

                

                // data.id = this.basicInfo.companyId
                // data.channelId = this.basicInfo.channelId
                // data.auditStatus = this.basicInfo.auditStatus

                // await updateSaasCompany({
                //     ...data
                // })
                message.success('操作成功')
                this.handleRefresh()
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    filterBtnConfig() {
        return {} as FilterDto
    }

    async onSubmit() {
        const basicData = getModelValue(this.basicFormConfig)
        const params = Object.assign(basicData)
        params.id = this.basicData.companyId
        params.channelId = this.basicData.channelId
        params.auditStatus = this.basicData.auditStatus
        // params.productType = ProductTypeEnum.PAYWAGE // 产品类型固定为子弹发薪

        if (params.creditCodePicture?.length) {
            params.creditCodePicture = params.creditCodePicture[0].url ?? params.creditCodePicture[0].base64
        }
        // 更新基本信息
        await updateSaasCompany(params)

        message.success('更新成功')
        goBack()
    }

    async initData(companyId: number) {
        const res = await getCompanyDetail({
            companyId
        })
        this.basicData = res
        initModelValue(this.basicFormConfig, res)
        this.basicFormConfig.items.receiptId.options = (await getReceiptList({
            channelId: res.channelId,
            pageNum: 1,
            pageSize: 999
        })).list.map(item => ({
            label: item.bankName,
            value: item.id
        }))
        // return res
    }

    created() {
        console.log(this.$route.query)
        this.basicForm = renderForm(this.basicFormConfig)

        if(this.$route.query.companyId) {
            this.initData(Number(this.$route.query.companyId))
        }
    }

    renderStatistics() {
        return <></>
    }

    renderRightBtns() {
        return <></>
    }

    render() {
        return (
            <div class="h-full flex flex-col">
                <div class="flex-1">
                    <CustomTitle>编辑基本信息</CustomTitle>
                    <div class="mt-20px">{this.basicForm.element()}</div>
                </div>
                <div class="pt-19px flex justify-center gap-20px">
                    <Button onClick={goBack}>取消</Button>
                    <Button type="primary" onClick={this.onSubmit}>确认</Button>
                </div>
            </div>
        )
    }
}

export default toNative<
    { basicData?: PayWageInfoDto; companyBasicInfo?: CompanyInfoDto },
    { refresh: () => void }
        >(EditBasicInfo)
